{% extends 'base.html' %}

{% block css %}
<style>
.td_style{
    width: 50%;
    text-align: center;
}

.td_style_2{
    width: 50%;
    text-align: center;
    vertical-align: text-top;
}

.td_style_3{
    width: 50%;
    text-align: left;
    vertical-align: text-top;
}
</style>
{% endblock %}

{% block js %}
<script>
    function send_bottle() {
        content = $('#paper').val()
        $.post('/bottle/send', {'content': content}, function (data) {
            if(data.success){
                alert('成功了!')
                $('#paper').val('')
            }
        })
    }

    function get_bottle(want_type) {
        $.get('/bottle/get', {'want_type': want_type}, function (data) {
            if(data.success){
                window.location.href = '/bottle/detail?bottle_id='+ data.bottle_id;
            }else {
                alert('不能再捡了, 扔一个吧')
            }
        })
    }
    
    function del_bottle(thx, bottle_id) {
        if(confirm('确定删除该漂流瓶吗?')){
            $.post('/bottle/del', {'bottle_id': bottle_id}, function (data) {
                if(data.success){
                    $(thx).parent().remove()
                }
            })
        }
    }
</script>
{% endblock %}

{% block content %}
<div class="center_div">
<table style="width: 100%">
    <tr>
        <td class="td_style">
            <textarea style="width: 60%; height: 70px" id="paper"></textarea>
            <br>
            <button onclick="send_bottle()">扔一个</button>
        </td>
        <td class="td_style">
            <button onclick="get_bottle('M')" style="background-color: #00CCFF">捡男生的漂流瓶</button>
            <br><br>
            <button onclick="get_bottle('F')" style="background-color: #ff6666">捡女生的漂流瓶</button>
        </td>
    </tr>

    <tr>
        <td class="td_style_2">
            <br>
            扔过的瓶子
        </td>
        <td class="td_style_2">
            <br>
            捡到的瓶子
        </td>
    </tr>

    <tr>
        <td class="td_style_3">
            <br>
            {% for b in bottles_which_i_send %}
            <div style="background-color: #ffff99">
                <a onclick="del_bottle(this, {{ b.id }})">×</a>&nbsp;&nbsp;
                <a style="font-size: smaller">{{ b.create_time|date:'Y-m-d H:i' }}</a>
                {% if b.reply_count %}
                    <a style="color: #009900">&nbsp;{{ b.reply_count }}回复&nbsp;</a>
                {% else %}
                    <a style="color: #dd0000">&nbsp;{{ b.reply_count }}回复&nbsp;</a>
                {% endif %}
                <a href="/bottle/detail?bottle_id={{ b.id }}">{{ b.content|slice:"10" }}</a>
            </div>
            <br>
            {% endfor %}
        </td>
        <td class="td_style_3">
            <br>
            {% for b in bottles_which_i_got %}
            <div style="background-color: #ffffbb">
                <a onclick="del_bottle(this, {{ b.id }})">×</a>&nbsp;&nbsp;
                <a style="font-size: smaller">{{ b.create_time|date:'Y-m-d H:i' }}</a>
                {% if b.reply_count %}
                    <a style="color: #009900">&nbsp;{{ b.reply_count }}回复&nbsp;</a>
                {% else %}
                    <a style="color: #dd0000">&nbsp;{{ b.reply_count }}回复&nbsp;</a>
                {% endif %}
                <a href="/bottle/detail?bottle_id={{ b.id }}">{{ b.content|slice:"10" }}</a>
                <br>
            </div>
            <br>
            {% endfor %}
        </td>
    </tr>
</table>
</div>
{% endblock %}